<template>
    <el-row style="background: darkturquoise">
        <el-col :span="20">
            <div v-loading="loading"
                 ref="chinaMap"
                 style="height: 800px;border: solid 0px white;width: 100%;"
            >
            </div>
            <div style="bottom: 50px;position:fixed;">
                <template v-for='(v,index) in level' :key='index'>
                    <el-row>
                        <el-col :span="16">
                            <div style="width:15px;height:15px;" :style="{'background':v.color }">
                            </div>
                        </el-col>
                        <el-col :span="8">
                        <span v-if="index === 0" style="font-size: 10px">
                            热
                        </span>
                            <span v-else-if="index === level.length -1" style="font-size: 10px">
                            冷
                        </span>
                        </el-col>
                    </el-row>
                </template>
            </div>
        </el-col>
        <el-col :span="4">

            <el-row>
                <el-card>
                    <div id="coolChart" style="width: 250px;height: 250px" v-loading="loading"></div>
                </el-card>
            </el-row>
            <el-row style="margin-top: 10px">
                <el-card>
                    <div id="hotChart" style="width: 250px;height: 250px" v-loading="loading"></div>
                </el-card>
            </el-row>
        </el-col>

    </el-row>

</template>

<script setup>
    import * as echarts from "echarts"
    import chinaJSON from '../assets/china.json'
    import {onMounted, ref} from 'vue'
    import {getProvincialCapitalWeather} from "../api/weather";

    const chinaMap = ref()
    onMounted(() => {
        initWeather()
    })
    let loading = true;
    let cool = [];
    let level = [
        {
            temp: 35,
            color: '#f80d03',
        },
        {
            temp: 33,
            color: '#f84534',
        },
        {
            temp: 30,
            color: '#f86a3f'
        },
        {
            temp: 28,
            color: '#f88d58'
        },
        {
            temp: 25,
            color: '#f8ad5f'
        },
        {
            temp: 23,
            color: '#ddf85e'
        },
        {
            temp: 20,
            color: '#b9f84f'
        },
        {
            temp: 18,
            color: '#83f85b'
        },
        {
            temp: 15,
            color: '#59f84a'
        },
        {
            temp: 13,
            color: '#13f844'
        },
        {
            temp: 10,
            color: '#13f894'
        },
        {
            temp: 5,
            color: '#1cf8cd'
        },
        {
            temp: 0,
            color: '#17e9f8'
        },
        {
            temp: -5,
            color: '#18e1f8'
        },
        {
            temp: -10,
            color: '#35a2f8'
        },
        {
            temp: -15,
            color: '#4987f8'
        },
        {
            temp: -20,
            color: '#0c1df8'
        },
    ]
    let regions = []
    let chartData = new Set()
    let scatter = [
        {name: '江西瓦罐汤', value: [115.892151, 28.676493, 360100]},
        {name: '上海生煎包', value: [121.472644, 31.231706, 310000]},
        {name: '杭州西湖醋鱼', value: [120.153576, 30.287459, 330100]},
        {name: '贵阳辣子鸡', value: [106.713478, 26.578343, 520100]},
        {name: '重庆小面', value: [106.504962, 29.533155, 500100]},
        {name: '四川火锅', value: [104.065735, 30.659462, 510100]},
        {name: '广东肠粉', value: [113.280637, 23.125178, 440100]},
        {name: '澳门脆皮五花肉', value: [113.54909, 22.198951, 820000]},
        {name: '香港菠萝包', value: [114.173355, 22.320048, 810000]},
        {name: '武汉热干面', value: [114.298572, 30.584355, 420100]},
        {name: '西藏酥油茶', value: [91.132212, 29.660361, 540100]},
        {name: '桂林米粉', value: [108.320004, 22.82402, 450100]},
        {name: '厦门沙茶面', value: [119.306239, 26.075302, 350100]},
        {name: '海南椰子饭', value: [110.33119, 20.031971, 460100]},
        {name: '青海牦牛肉', value: [101.778916, 36.623178, 630100]},
        {name: '徽州毛豆腐', value: [117.283042, 31.86119, 340100]},
        {name: '河南烩面', value: [113.665412, 34.757975, 410100]},
        {name: '南京盐水鸭', value: [118.767413, 32.041544, 320100]},
        {name: '山东煎饼', value: [117.000923, 36.675807, 370100]},
        {name: '山西刀削面', value: [112.549248, 37.857014, 140100]},
        {name: '河北驴肉火烧', value: [114.502461, 38.045474, 130100]},
        {name: '内蒙古烤全羊', value: [111.670801, 40.818311, 150100]},
        {name: '沈阳鸡架', value: [122.604994, 41.299712, 210100]},
        {name: '长春清蒸白鱼', value: [126.171208, 43.703954, 220100]},
        {name: '哈尔滨红肠', value: [126.642464, 45.756967, 230100]},
        {name: '北京烤鸭', value: [116.46122, 39.97886, 110000]},
        {name: '兰州拉面', value: [103.86615, 36.040129, 620100]},
        {name: '新疆烧烤', value: [87.613228, 43.810394, 650100]},
        {name: '长沙臭豆腐', value: [112.915204, 28.207735, 430100]},
        {name: '西安肉夹馍', value: [108.953445, 34.288842, 610100]},
        {name: '云南过桥米线', value: [102.710002, 25.045806, 530100]},
    ]

    function handleChartData() {
        chartData.forEach(s => {
            cool.push(JSON.parse(s))
        })
        cool.sort((a, b) => {
            return a.temp - b.temp;
        })
        drawCoolChart()
        drawHotChart();
    }

    function drawCoolChart() {
        var coolChart = echarts.init(document.getElementById("coolChart"))

        coolChart.setOption({
            title: {text: "极致凉爽"},
            tooltip: {},
            xAxis: {
                data: [cool[0].name, cool[1].name, cool[2].name]
            },
            yAxis: {},
            series: [
                {
                    type: 'bar',
                    data: [cool[0].temp, cool[1].temp, cool[2].temp],
                    itemStyle: {
                        normal:{
                            color:function(params){
                                let  color = ['#13f844','#59f84a', '#83f85b'];
                                return color[params.dataIndex]
                            }
                        }
                    }
                }

            ]
        });
    }

    function drawHotChart() {
        var coolChart = echarts.init(document.getElementById("hotChart"))

        coolChart.setOption({
            title: {text: "地狱酷暑"},
            tooltip: {},
            xAxis: {
                data: [cool[cool.length -1].name, cool[cool.length -2].name, cool[cool.length -3].name]
            },
            yAxis: {},
            series: [
                {
                    type: 'bar',
                    data: [cool[cool.length -1].temp, cool[cool.length -2].temp, cool[cool.length -3].temp],
                    itemStyle: {
                        normal:{
                            color:function(params){
                                let  color = ['#f80d03', '#f84534', '#f86a3f'];
                                return color[params.dataIndex]
                            }
                        }
                    }
                }

            ]
        });
    }
    function drawChina() {
        var myChart = echarts.init(chinaMap.value)
        echarts.registerMap('china', chinaJSON) //注册可用的地图
        var option = {
            geo: {
                map: 'china',
                roam: true, //是否允许缩放，拖拽
                zoom: 1.6, //初始化大小
                //缩放大小限制
                scaleLimit: {
                    min: 1, //最小
                    max: 5, //最大
                },
                //设置中心点
                center: [110.97, 34.71],
                //省份地图添加背景
                regions: regions,
                itemStyle: {
                    areaColor: 'white',
                    color: 'red',
                    borderColor: '#232652',
                    borderWidth: 1,
                },
                //高亮状态
                emphasis: {
                    label: {
                        show: true,
                        color: "#fff",
                    },
                    itemStyle: {
                        areaColor: '#1af9e5',
                        color: '#fff',
                    },
                },
            },
            //配置属性
            series: {
                type: 'effectScatter',
                coordinateSystem: 'geo',
                data: scatter,
                showEffectOn: 'render',
                rippleEffect: {
                    //涟漪特效相关配置
                    brushType: 'stroke', //波纹的绘制方式，可选 'stroke' 和 'fill'
                },
                hoverAnimation: true, //是否开启鼠标 hover 的提示动画效果
                label: {
                    //图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等，
                    normal: {
                        formatter: '{b}',
                        position: 'right',
                        show: true,
                    },
                },
                itemStyle: {
                    //图形样式，normal 是图形在默认状态下的样式；emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时
                    normal: {
                        color: '#ffffff', //散点的颜色
                        shadowBlur: 10,
                        shadowColor: 20,
                        fontSize: '12px',
                    },
                },
                zlevel: 1,
            },
            tooltip: {
                trigger: 'item',
                backgroundColor: 'rgba(50,50,50,0.7)',
                borderColor: '#333',
                textStyle: {
                    color: '#fff',
                    fontSize: 12
                },
                formatter: (item) => {
                    let html = `${item.name}`
                    let weather = (item.data.value)[3];
                    for (let i = 0; i < weather.length; i++) {
                        html += `<p style="font-size:12px; "> ${weather[i].date}  &nbsp;<span style="color: limegreen ">${weather[i].dayweather} &nbsp;${weather[i].daywind}风 ${weather[i].daypower}级</span></p>`
                        html += `<p style="font-size:12px">
                            温度： <span style="color: limegreen ">${weather[i].nighttemp}℃ ~ ${weather[i].daytemp}℃</span>
                       </p>`
                    }
                    return html
                }
            },
        }
        myChart.setOption(option)
    }

    function initWeather() {
        getProvincialCapitalWeather().then((res) => {
            for (let i = 0; i < res.length; i++) {
                let days = (JSON.parse(res[i].weather).forecasts)[0].casts;
                let code = (JSON.parse(res[i].weather).forecasts)[0].adcode;
                if (days.length > 0) {
                    for (let j = level.length - 1; j > 0; j--) {
                        if (days[0].daytemp > level[j].temp) {
                            let data = {
                                name: res[i].name,
                                itemStyle: {
                                    areaColor: level[j].color,
                                    opacity: 1,
                                },

                            }
                            regions.push(data);
                            chartData.add(JSON.stringify({
                                name: res[i].name,
                                temp: days[0].daytemp,
                            }))
                        }

                    }

                    for (let k = 0; k < scatter.length; k++) {
                        if (JSON.stringify((scatter[k].value)[2]) === code) {
                            (scatter[k].value)[3] = days;
                        }
                    }
                }
            }
            loading = false;
            drawChina()
            handleChartData()

        })
    }
</script>